import { View, Text, BaseEventOrig, FormProps } from "@tarojs/components";
import { useEffect, useRef, useState } from "react"; // 使用 useEffect 替代可能错误的 useLoad
import "./index.scss";
import {
  Button,
  Calendar,
  Cell,
  Checkbox,
  Field,
  Form,
  Input,
  Radio,
  Stepper,
  Steps,
  Toast,
} from "@taroify/core";
import { FormItemInstance } from "@taroify/core/form";
import _ from "lodash";

export default function Index() {
  useEffect(() => {
    console.log("Page loaded.");
  }, []);

  const [selectedRadio, setSelectedRadio] = useState("1"); // 默认选中第一个单选框

  const onSubmit = (event: BaseEventOrig<FormProps.onSubmitEventDetail>) => {
    Toast.open(JSON.stringify(event.detail.value));
  };

  const itemRef = useRef<FormItemInstance>();
  const [open, setOpen] = useState(false);

  const formatDate = (date: any) => {
    console.log("date:", date);
    if (date) {
      const years = _.toString(date?.getFullYear());
      const months = _.padStart(_.toString(date?.getMonth() + 1), 2, "0");
      const days = _.padStart(_.toString(date?.getDate()), 2, "0");
      return `${years}-${months}-${days}`;
    }
  };

  return (
    <View className="index">
      <Steps value={0}>
        <Steps.Step>完善信息</Steps.Step>
        <Steps.Step>填写地址</Steps.Step>
        <Steps.Step>支付订单</Steps.Step>
      </Steps>
      <Form onSubmit={onSubmit}>
        <Toast id="toast" />
        <Cell.Group inset>
          <Field label="申请类型" name="radio">
            <Radio.Group
              direction="horizontal"
              value={selectedRadio}
              onChange={(value) => setSelectedRadio(value)}
            >
              <Radio name="1">本人申请</Radio>
              <Radio name="2">代理人申请</Radio>
            </Radio.Group>
          </Field>
          <Form.Item
            name="pat_name"
            rules={[{ required: true, message: "请输入患者姓名" }]}
          >
            <Form.Label>患者姓名</Form.Label>
            <Form.Control>
              <Input placeholder="请输入患者姓名" />
            </Form.Control>
          </Form.Item>
          <Form.Item
            name="pat_sfz"
            rules={[{ required: true, message: "请输入患者身份证" }]}
          >
            <Form.Label>患者身份证</Form.Label>
            <Form.Control>
              <Input placeholder="请输入患者身份证" />
            </Form.Control>
          </Form.Item>
          <Form.Item
            name="pat_mobile"
            rules={[{ required: true, message: "请输入患者手机号" }]}
          >
            <Form.Label>患者手机号</Form.Label>
            <Form.Control>
              <Input placeholder="请输入患者手机号" />
            </Form.Control>
          </Form.Item>

          <Field
            label="出院日期"
            ref={itemRef}
            name="calendar"
            clickable
            isLink
          >
            {(controller) => (
              <Input
                value={formatDate(controller.value)}
                disabled={controller.disabled}
                readonly
                placeholder="点击选择日期"
                onClick={() => setOpen(true)}
              />
            )}
          </Field>
          <Calendar
            type="single"
            poppable
            showPopup={open}
            onCancel={() => setOpen(false)}
            onConfirm={(newValue) => {
              itemRef.current?.setValue(newValue);
              setOpen(false);
            }}
          ></Calendar>
          <Field label="份数" name="stepper" defaultValue={1}>
            <Stepper />
          </Field>
          <Field label="复印内容" name="checkboxGroup">
            <Checkbox.Group direction="horizontal">
              <Checkbox name="1" shape="square">
                病案首页
              </Checkbox>
              <Checkbox name="2" shape="square">
                入院记录
              </Checkbox>
            </Checkbox.Group>
          </Field>
        </Cell.Group>
        <View style={{ margin: "16px" }}>
          <Button shape="round" block color="primary" formType="submit">
            提交
          </Button>
        </View>
      </Form>
    </View>
  );
}
